<template>
  <div class="wrapper">
    <div class="desktop">
      <div class="icon" @click="show('.blog')">
        <img src="../assets/icon-blog.svg"/>
        <p class="iconname">博客</p>
      </div>
    </div>
    <Blog />
    <!-- <Dock /> -->
  </div>
</template>

<script>
import Blog from '../components/blog'
import { showWindow } from '../util'
// import Dock from '../components/dock'
export default {
  components: {
    Blog,
  },
  methods: {
    show(el) {
      console.log(Blog);
      showWindow(el, Blog)
    }
  },
}
</script>

<style lang="scss" scoped>
  .wrapper{
    height: 100vh;
    .desktop{
      position: relative;
      height: 100%;
      padding: 32px;
      background: linear-gradient(45deg, #2e3346, #99adc6);
      .icon{
        cursor: pointer;
        text-align: center;
        display: inline-block;
        margin: 32px;
        embed,
        img{
          width: 60px;
          height: 60px;
        }
        .iconname{
          margin-top: 5px;
          color: #fff;
        }
      }
    }
  }
  .showWindow{
    animation: dialogOpen 1500ms;
    display: block !important;
  }

  @keyframes dialogOpen{0%{-webkit-transform:matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1);opacity:0}3.4%{-webkit-transform:matrix3d(.795,0,0,0,0,.822,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.795,0,0,0,0,.822,0,0,0,0,1,0,0,0,0,1)}4.7%{-webkit-transform:matrix3d(.835,0,0,0,0,.88,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.835,0,0,0,0,.88,0,0,0,0,1,0,0,0,0,1)}6.81%{-webkit-transform:matrix3d(.898,0,0,0,0,.968,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.898,0,0,0,0,.968,0,0,0,0,1,0,0,0,0,1)}9.41%{-webkit-transform:matrix3d(.965,0,0,0,0,1.05,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.965,0,0,0,0,1.05,0,0,0,0,1,0,0,0,0,1)}10.21%{-webkit-transform:matrix3d(.982,0,0,0,0,1.068,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.982,0,0,0,0,1.068,0,0,0,0,1,0,0,0,0,1)}13.61%{-webkit-transform:matrix3d(1.037,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.037,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1)}14.11%{-webkit-transform:matrix3d(1.042,0,0,0,0,1.099,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.042,0,0,0,0,1.099,0,0,0,0,1,0,0,0,0,1)}17.52%{-webkit-transform:matrix3d(1.062,0,0,0,0,1.072,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.062,0,0,0,0,1.072,0,0,0,0,1,0,0,0,0,1)}18.72%{-webkit-transform:matrix3d(1.064,0,0,0,0,1.056,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.064,0,0,0,0,1.056,0,0,0,0,1,0,0,0,0,1)}21.32%{-webkit-transform:matrix3d(1.059,0,0,0,0,1.021,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.059,0,0,0,0,1.021,0,0,0,0,1,0,0,0,0,1)}24.32%{-webkit-transform:matrix3d(1.045,0,0,0,0,.988,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.045,0,0,0,0,.988,0,0,0,0,1,0,0,0,0,1)}25.23%{-webkit-transform:matrix3d(1.04,0,0,0,0,.981,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.04,0,0,0,0,.981,0,0,0,0,1,0,0,0,0,1)}29.03%{-webkit-transform:matrix3d(1.019,0,0,0,0,.969,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.019,0,0,0,0,.969,0,0,0,0,1,0,0,0,0,1)}29.93%{-webkit-transform:matrix3d(1.014,0,0,0,0,.97,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.014,0,0,0,0,.97,0,0,0,0,1,0,0,0,0,1)}35.54%{-webkit-transform:matrix3d(.994,0,0,0,0,.989,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.994,0,0,0,0,.989,0,0,0,0,1,0,0,0,0,1)}36.74%{-webkit-transform:matrix3d(.991,0,0,0,0,.994,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.991,0,0,0,0,.994,0,0,0,0,1,0,0,0,0,1)}41.04%{-webkit-transform:matrix3d(.988,0,0,0,0,1.007,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.988,0,0,0,0,1.007,0,0,0,0,1,0,0,0,0,1)}44.44%{-webkit-transform:matrix3d(.99,0,0,0,0,1.01,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99,0,0,0,0,1.01,0,0,0,0,1,0,0,0,0,1)}52.15%{-webkit-transform:matrix3d(.997,0,0,0,0,1.002,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.997,0,0,0,0,1.002,0,0,0,0,1,0,0,0,0,1);opacity:1}59.86%{-webkit-transform:matrix3d(1.002,0,0,0,0,.997,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.002,0,0,0,0,.997,0,0,0,0,1,0,0,0,0,1)}63.26%{-webkit-transform:matrix3d(1.002,0,0,0,0,.998,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.002,0,0,0,0,.998,0,0,0,0,1,0,0,0,0,1)}75.28%{-webkit-transform:matrix3d(1,0,0,0,0,1.001,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1.001,0,0,0,0,1,0,0,0,0,1)}85.49%,90.69%,100%{-webkit-transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}100%{opacity:1}}
</style>
<style lang="scss">
* {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
</style>
